<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 20px;height: 20px;border-radius: 50%;background: red;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
</body>
<script>

    // const obox = document.querySelector(".box")
    
    const r = 200;

    const target = 315;

    let now = 225;

    const speed = 10;

    let t = setInterval(() => {
        if(now >= target){
            clearInterval(t)
        }else{
            const div = document.createElement("div")
            div.className = "box"
            document.body.appendChild(div);

            // 根据三角函数计算元素实际的位置
            div.style.left = Math.cos( now / (180 / Math.PI) ) * r + r + "px";
            div.style.top = Math.sin( now / (180 / Math.PI) ) * r + r + "px"

            now += speed;
        }
    }, 30);

</script>
</html>